<template>
  <div class="wrapper">
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>

<script>
import {debounce}from'@/assets/js/common.js'
import BScroll from "@better-scroll/core";
  import Pullup from '@better-scroll/pull-up'
  import observeDOM from '@better-scroll/observe-dom'
  import observeImage from '@better-scroll/observe-image'
export default {
    props:{
      probeType:{
        type:Number,
        default(){
          return 0
        }
      },
      pullUpLoad:{
        type:Boolean,
        default(){
          return false
        }
      },
      TBoffsetTop:{
        type:Number
      }
    },
    data(){
        return{
            bs:null,
            
            timeout1:null,
            showTab:false
        }
    },
 mounted(){
    BScroll.use(Pullup)
    BScroll.use(observeDOM)
    BScroll.use(observeImage)
    this.bs=new BScroll('.wrapper',{
      click:true,
      scrollY:true,
      probeType:this.probeType,
      pullUpLoad:this.pullUpLoad,
      observeDOM:true,//监视DOM
      observeImage:true,//监视图像，防止因图片未加载到加载后造成的高度监听不同步
      bounce:true,//回弹效果
    })
    this.bs.on('scroll',position=>{
     
      if((-position.y)>1400){
        
        this.$emit('isShowBT',true)
      }else{
        
        this.$emit('isShowBT',false)
      }
      if((-position.y)>(this.TBoffsetTop-44)){
        this.showTab=true
        this.$emit('isShowTab')
      }else{
        this.showTab=false
        this.$emit('isShowTab')
      }
    })
    
    const load=debounce(()=>{
      this.$emit('loadMore')
     
      //this.bs.finishPullUp() 完成上拉，在home里面网络请求完再调用
      },100)

    this.bs.on('pullingUp',()=>{
      load()
      this.bs.refresh() //解决回弹的BUG（高度不同步问题），用scroll的observeImage也行

    })

    }
}
</script>

<style scoped>
.wrapper{
    height:calc(100vh - 90px);
    overflow: hidden;   
}

</style>